<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  	<title>Expandable Fieldsets Example</title>
  	<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
  	<script src="expandable_fieldsets.js" type="text/javascript" charset="utf-8"></script>
  	<style type="text/css" media="screen">
  	 a { cursor: pointer; text-decoration: underline; color: #00F; }
  	 #client_name { width: 500px; }
  	 #serialized_data { width: 500px; height: 300px; }
  	 #grand_total { text-align: left; }
  	</style>
  </head>
  <body>
    <h1>Invoice</h1>
    <form action="#" method="post" accept-charset="utf-8">
      <fieldset>
        <legend>Invoice details</legend>
        <p><label for="client_name">Client name: </label><input type="text" name="client_name" value="Company XYZ" id="client_name"></p>
        <p><label for="serialized_data">Serialized data: </label><textarea type="text" name="serialized_data" id="serialized_data"></textarea></p>
      </fieldset>
      <fieldset>
        <legend>Line items</legend>
        <table>
          <thead>
            <tr>
              <th>Taxable?</th>
              <th>Quantity</th>
              <th>Description</th>
              <th>Cost</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="line_items"></tbody>
          <tfoot>
            <tr>
              <th colspan="4"></th>
              <th id="grand_total">Total: $0</th>
            </tr>
          </tfoot>
        </table>
      </fieldset>
      <p><input type="submit" value="Send &rarr;"></p>
    </form>


    <script type="text/javascript" charset="utf-8">
      var Example = {
        calculateLineTotal:function(ef,snippet){
          ef.getFormElements(snippet).each(function(field){
            Event.observe(field,'change',function(){
              var taxable = snippet.down('.taxable',0).checked
              var quantity = parseFloat(snippet.down('.quantity',0).value) || 0
              var cost = parseFloat(snippet.down('.cost',0).value) || 0
              var total = snippet.down('.line_total',0)
              total.value = '$'+(((taxable)?1.0825:1)*(quantity*cost))
              Example.calculateGrandTotal()
            })
          })
        },
        calculateGrandTotal:function(){
          var grand_total = 0
          $('line_items').getElementsByClassName('line_total').each(function(line){
            grand_total += parseFloat(line.value.substring(1))
          })
          Element.update('grand_total','Total: $'+grand_total)          
        }
      }

      new ExpandableFieldset(
        'line_items',
        '<tr class="line-item"><td><input class="taxable" type="checkbox" name="taxable" value="1"></td><td><input type="text" class="quantity" name="quantity"></td><td><input type="text" name="description" value=""></td><td><input type="text" class="cost" name="cost"></td><td id="total"><input type="text" class="line_total" name="line_total" value="$0" disabled="disabled"></td><td>#{remover}</td></tr>',
        {
          dataField: 'serialized_data',
          min: 3,
          max: 6,
          afterAdd: function(ef, e) {
            Example.calculateLineTotal(ef,e.snippet)
          },
          afterRemove: function(ef, e) {
            Example.calculateGrandTotal()
          }
        }
      )
    </script>
  </body>
</html>
